<template>
  <div class="gl-computer gl-flex">
    <label for="compute">VM/VH计算器</label>
    <input type="text" id="compute" v-model = 'num' >
    <span>{{value}}</span>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue'
  const num = ref(0)
  const props = defineProps({
    width: {
      type: Number,
      default:750
    },
    height: {
      type: Number,
      default:1334
    }
  })
  const value = computed(() => {
  return `${(parseInt(num.value)/props.width*100).toFixed(2)}vw; 
   ${(parseInt(num.value)/props.height*100).toFixed(2)}vh`
  })
</script>

<style scoped>
  .gl-computer {
    width: 120px;
    background: rgba(204, 142, 209, 0.25);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
  }
  .gl-flex {
    display: flex;
    flex-direction: column;
  }
  .gl-flex input {
      opacity: 0.5;
      display: inline-block;
      font-size: inherit;
      height: 30px;
      line-height: 45px;
      outline: none;
      box-sizing: border-box;
      padding: 0 15px;
      width: 100%;
  }
</style>
